<template>
	<page-meta>
		<navigation-bar :title="'成品收货'" front-color="#000000" background-color="#FBFBFF" fixed />
	</page-meta>
	<view class="baseForm">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<!-- 条码录入 -->
		
		<u-text text="包装信息" class="area-header">
		</u-text>
		<view class="upload-scan">
			<scan-bar id="scanStorageUnitInput" ref="storageUnitScanBarRef" placeholder="扫描工序流转单" @code-scanned="getStorageUnitInfoByCode"
				:key="datekey"></scan-bar>
		</view>
		<u-line></u-line>
		<view class="list-content">
			<text class="list-title">列表信息({{ scanList.length }})</text>
			<view class="body">
				<u-list class="list" v-if="scanList && scanList.length > 0"
					:height="ListViewHeight">
					<u-list-item v-for="(detail, index) in scanList" :key="detail.id">
						<view class="card">
							<view class="right">
								<view class="title">
									包装编码:&nbsp;&nbsp;{{detail.extenalCode}}
								</view>
								<view class="body">
									物料:&nbsp;&nbsp;{{ detail.materialCode }}({{ detail.materialName }})
								</view>
								<view class="body">
									数量/重量:&nbsp;&nbsp;{{ detail.totalQuantity }}
								</view>
								<view class="body">
									单位:&nbsp;&nbsp;{{ detail.quantityUnit }}
								</view>
								<view class="body">
									存储批次:&nbsp;&nbsp;{{detail.stockBatch}}
								</view>
								<view class="body">
									供应批次:&nbsp;&nbsp;{{detail.supplyBatch}}
								</view>
							</view>
							<view class="left">
								<u-icon name="close-circle-fill" color="#f56c6c" size="30px" @click="removeDetail(index)"></u-icon>
							</view>
						</view>
						<u-line></u-line>
					</u-list-item>
				</u-list>
				<!-- 空数据 -->
				<u-list v-else :height="ListViewHeight">
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</u-list>
			</view>
		</view>
		<u-line></u-line>
		
		<!-- 提交按钮 -->
		<view class="search">
			<u-button type="primary" @click="confirmButtonClick" class="custom-style" :loading="posting">确定</u-button>
		</view>
		<u-modal :show="messageShow" :closeOnClickOverlay="false" title="提示" content="是否要删除此包装"
			:showCancelButton="true" @confirm="messageConfirm" @cancel="messageCancel"></u-modal>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import ScanBar from '@/components/scan-bar/index.vue';
	import { http } from "../../../utils/http";
	import ULine from "../../../uni_modules/uview-plus/components/u-line/u-line.vue";


	// 重置表单信息 & 光标自动blur
	const storageUnitScanBarRef = ref();
	const scanBarRef = ref();
	const datekey = ref(new Date());
	const messageShow = ref(false);
	const deleteIndex = ref(0);
	// 定义列表数据
	const scanList = ref([]);
	let binData = reactive({
	  id: "",
	  binCode: "",
	  pathCode: "",
	  organizationId: "",
	  organizationCode: "",
	  organizationName: "",
	  warehouseId: "",
	  warehouseCode: "",
	  warehouseName: "",
	  storageTypeId: "",
	  storageTypeCode: "",
	  storageTypeName: "",
	  storageSectionId: "",
	  storageSectionCode: "",
	  noLimit: "",
	  lockInbound: "",
	  lockOutbound: "",
	  stockAbilityId: "",
	  stockAbilityCode: "",
	  usedWeight: "",
	  usedColume: "",
	  usedArea: "",
	  remarks: "",
	  createTime: "",
	  createdUserId: "",
	  lastUpdateTime: "",
	  lastUpdatedUserId: "",
	  deleted: "",
	});
	
	const ListViewHeight = ref(0);
	
	onShow(() => {
		ListViewHeight.value = uni.getSystemInfoSync().windowHeight - 180;
		console.log('ListViewHeight.value', ListViewHeight.value);
	})
	
	onLoad(() => {
		// setTimeout(()=>{
		// 	scanBarRef.value.reset();
		// }, 1000);
		
	})

	// 校验提交
	const uForm = ref();
	const posting = ref(false);
	
	async function getStorageUnitInfoByCode(result : any) {
		storageUnitScanBarRef.value.reset();
		datekey.value = new Date();
		if (result) {
			try {
		const data = await http({
			url: '/mes/mesproducingstock/toReceivingGood/' ,
			method: 'POST',
			data: {materialBarcode:result}
		}).finally(
			storageUnitScanBarRef.value.reset()
		);
		const id = data.data.id;
		console.log("scanList", scanList);
		const scannedStorageUnit = scanList.value.find(item => item.id === id);
		if (scannedStorageUnit) {
			uni.$u.toast('这个包装已经被扫描过！');
		} else {
			// scanList.value.push(data.data);
			scanList.value.splice(0, 0, data.data);
		}
		console.log(scanList.value);
		}
		catch (error) {
			console.error("111");
		}
	}
	else{
		  result = '';
	}
	storageUnitScanBarRef.value.reset();
	datekey.value= new Date();
	}


	
	async function messageConfirm() {
		messageShow.value = false;
		scanList.value.splice(deleteIndex.value, 1);
	}
	
	function messageCancel() {
		messageShow.value = false;
	}
	
	function removeDetail(index : any) {
		deleteIndex.value = index;
		messageShow.value = true;
	}

	async function confirmButtonClick() {
		 if (scanList.value.length == 0) {
			uni.$u.toast('请先扫描要收货的包装！');
		} else {
			const data = await http({
				url: '/wms/rmreceipt/receiptgoods/',
				method: 'POST',
				data: scanList.value
			});
			
			if(data.code == '200') {
				uni.$u.toast('收货成功！');
				scanList.value = [];
			}	
		}
	}
</script>

<style lang="scss">
	.baseForm {
		.area-header {
			color: #909193;
			padding: 10px 15px;
			margin-bottom: 0;
			font-size: 15px;
			background-color: #f3f4f6;
			display: flex;
		}

		.upload-scan {
			padding: 10px 20rpx;
		}

		.body {
			padding: $uni-page-padding;

			.scan-bar {
				display: flex;
				flex: 1;
			}
			.form {
				padding: 0 20rpx;
			}
		}
		
.list-content {
			padding: $uni-page-padding;
		
			.list-title {
				line-height: 40px;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.4);
			}
		
			.list {
				.card {
					// margin-top: 5px;
					// margin-bottom: 10px;
					border-radius: 7px;
					display: flex;
					align-items: center;
					padding: 10px 0;
					transition: all 300ms ease;
					box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
		
					.left {
						// flex-basis: 90rpx;
						padding-right: 10px;
						text-align: right;
						font-size: 13px;
		
						.enter {
							line-height: 20px;
							margin-bottom: 5px;
						}
		
						.number {
							font-size: 13px;
							line-height: 18px;
						}
		
						:deep(.u-icon--right) {
							flex-direction: row-reverse;
						}
					}
		
					.right {
						flex: 1;
		
						.title {
							font-size: 15px;
							line-height: 20px;
							margin-bottom: 5px;
							font-weight: 700;
						}
		
						.body {
							padding-left: 0;
							font-size: 13px;
							line-height: 18px;
						}
					}
				}
			}
		}
		.search {
			display: flex;

			.custom-style {
				// width: 120px;
				margin: 10px 5px 5px;
				height: 36px;
				border-radius: 8px;

				&:nth-child(1) {
					flex: 1
				}

				&:nth-child(2) {
					flex: 3
				}
			}
		}
	}
</style>